<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="gmms" uri="/gmms-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden;">
	<head>
		<title>菜单排序</title>
<jsp:include page="../../pages/head.jsp" />
<script type="text/javascript" src="<%=path %>/js/nfpDrag.js"></script>
		<script type="text/javascript">
			$(function () {
	            $("#tableDrag").nfpDrag();
	            $("#parentMenuId").change(function(){
	            	toChild(parseInt($(this).val()));
	            });
	            $("#divScroll").width($("body:first").width()).height($(window).height()-$("#divHead").height()-5).fadeIn(200);
	        });
			var parentId=0;
			function toChild(keyId){
				xbox.load("loading");
				$.ajax({
					url			:"<%=path %>/menu/menuAjax_loadMenu_menuListAction.action",
					type 		: "POST",
					dataType 	: "json",
					data		: {
						"parentMenuId" : keyId
					},
					success 	: function(data) {
						if(data!=null && data.length!=0){
							parentId=keyId;
							var strTh='<tr><th width="10%" height="30" align="center">序号</th><th width="40%" align="center">菜单ID</th><th width="50%" align="center">菜单名称</th></tr>';
							var strTd='';
							for(var i=0;i<data.length;i++){
								strTd+='<tr align="center" height="30" ><td>'+(i+1)+'</td><td>'+data[i].menuId+'</td><td>'+data[i].menuName+'</td></td>';
							}
							var str=strTh+strTd;
							$("#tableDrag").html(str);
							$("#tableDrag").nfpDrag();
						}else{
							$("#tableDrag").html("");
						}
						xbox.ready("loading");
					},
					error		:function(){
						xbox.ready("loading");
						xbox.alert("数据正在提交，请稍候，或检查您的网络环境,确保其连接正常！");
					}
				});
			}
			
			function saveSort(){
				var array=$("#tableDrag").find("tr");
				str="";
				for(var i=1;i<array.length;i++){
					str+=(str=="" ? "" :",")+$($(array[i]).find("td")[1]).html();
				}
				if(str==""){
					j_tip("该父级菜单无子菜单，请重新选择父级菜单！", "error");
					return;
				}
				$.ajax({
					url			:"<%=path %>/menu/menuAjax_sortMenu_menuAction.action",
					type 		: "POST",
					dataType 	: "json",
					data		: {
						"sortMenuIds" : str,
						"parentMenuId" : $("#parentMenuId").val()
					},
					success 	: function(data) {
						j_tip("数据保存成功！", "succes");
					},
					error		:function(){
						xbox.alert("数据正在提交，请稍候，或检查您的网络环境,确保其连接正常！");
					}
				});
			}

			
		</script>
		<style type="text/css">
        .allowDrag
        {
            cursor: pointer;
        }
        .startDrag
        {
            border-bottom: dashed 2px green;
        }
        .tdDrag
        {
            border-bottom: dashed 2px red;
        }
        #drag_container
        {
            background: #ffffff;
            color: #000;
            z-index: 99999;
            font: normal 11px arial, tahoma, helvetica, sans-serif;
            border: 1px dashed #F1F1F1;
        }
    	</style>
		</head>
	<body style="overflow: hidden;">
		<div class="info_right_main">
			<div id="divHead">
				<table width="100%"><tr><td width="80" align="right" bgcolor="#FFFFFF">父级菜单：</td>
			    <td width="150"  align="left" bgcolor="#FFFFFF">
			    <select id="parentMenuId" >
			    	<option value="0" selected="selected">&nbsp;</option>
			    	<c:forEach items="${menuList}" var="m">
				    	<option value="${m.menuId}"><c:out value="${m.menuName}" /></option>
			    	</c:forEach>
			    </select>
				</td><td align="center">
					<input type='button' class="btn  btn-primary" id="btnSave" onclick="saveSort();" value='保存' />
				</td></tr></table>
			</div>
			<div id="divScroll" style="overflow: auto;display:none;">
		     <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableDrag">
		     			<tr>
				         <th width="10%" height="35" align="center">序号</th>
				         <th width="40%" align="center">菜单ID</th>
				         <th width="50%" align="center">菜单名称</th>
				       </tr>
			       <c:forEach items="${menuList}" var="menu" varStatus="status">
						<tr align="center" height="30" >
							<td>${status.index+1}</td>
							<td>${menu.menuId}</td>
							<td>${menu.menuName}</td>
						</tr>
					</c:forEach>
		     </table>
		     </div>
		</div>
	</body>
</html>
